<template>
    <div class="app-container">
        <div class="table-info-row">
            <div class="table-info">
                还款记录
            </div>
            <el-button class="back-btn" @click="router.back()">关闭</el-button>
        </div>
        <el-form class="search-form" inline :model="searchForm">
            <div>
                <el-form-item class="search-form-item" label="挂单单号:">
                    <el-input v-model="searchForm.mountCode" clearable placeholder="请输入挂单单号" />
                </el-form-item>
                <el-form-item class="search-form-item" label="支付流水号:">
                    <el-input v-model="searchForm.itemCode" clearable placeholder="请输入支付流水号" />
                </el-form-item>
                <el-form-item class="search-form-item" label="支付类型:">
                    <el-select v-model="searchForm.payState" filterable clearable placeholder="请选择支付类型">
                        <el-option v-for="item in payType_options" :key="item.payCode" :value="item.payCode"
                            :label="item.payName" />
                    </el-select>
                </el-form-item>
            </div>
            <div>
                <el-form-item class="search-form-item" label="支付方式:">
                    <el-select v-model="searchForm.payType" filterable clearable placeholder="请选择支付方式">
                        <el-option v-for="item in payState_options" :key="item.code" :value="item.code"
                            :label="item.name" />
                    </el-select>
                </el-form-item>
                <el-form-item class="action-btn-box">
                    <el-button type="primary" @click="handleSearch">查询</el-button>
                    <el-button class="reset-btn" @click="handleReset">清空筛选</el-button>
                </el-form-item>
            </div>
        </el-form>
        <div class="table-box">
            <el-table :data="tableData" stripe v-loading="loading">
                <el-table-column type="index" label="序号" min-width="70px" />
                <el-table-column prop="itemCode" label="支付流水号" min-width="280px" />
                <el-table-column prop="payStateName" label="支付类型" min-width="150px" />
                <el-table-column prop="payTypeName" label="支付方式" min-width="150px" />
                <el-table-column prop="payAmt" label="还款金额" min-width="150px">
                    <template #default="scope">
                        <span class="color-FF6A00">{{ scope.row.payAmt }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="mountCode" label="挂单单号" min-width="280px" />
                <el-table-column prop="payDate" label="还款时间" min-width="280px" />
                <!-- <el-table-column prop="" label="还款状态" min-width="160px" /> -->
                <el-table-column prop="payRemark" label="备注" min-width="200px" />
                <el-table-column prop="" label="操作" min-width="150px" fixed="right">
                    <template #default="scope">
                        <el-button v-if="scope.row.payState != 0" class="action-btn" @click="handleReturn(scope)">退款</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- <div class="pagination-box">
            <el-pagination background layout="prev, pager, next,sizes, jumper, total" :total="total"
                :current-page="currentPage" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                style="margin-top:10px" />
        </div> -->
        <div class="orderRecords-container-footer">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page.sync="currentPage" :page-size="pageSize" layout="total, prev, pager, next,sizes, jumper"
                :total="total">
            </el-pagination>
            <button class="footer-button">确定</button>
        </div>
    </div>
</template>
  
<script setup>

import Api from '@/api'
const router = useRouter()

// 获取支付方式OPTIONS
let payType_options = ref([])
const get_payType_options = (params) => {
    // 支付类型 1:微信 2:支付宝
    // payType_options = [
    //     { payCode: 1, payName: '微信' },
    //     { payCode: 2, payName: '支付宝' }
    // ]
    // return
    Api.Common.PcObjProcess.Do({ "functionName": "getPayType", "orgCode": "0004", "contentData": { parentCode: '571' } }).then(res => {
        console.log('获取支付方式OPTIONS res :>> ', res,);
        res.result.forEach(item => {
            if (item.payName == '微信' || item.payName == '支付宝') {
                payType_options.value.push(item)
            }
        });
    })
}
get_payType_options()

// 获取支付类型OPTIONS
let payState_options = ref([])
const get_payState_options = (params) => {
    // 0:退款 1：还款
    payState_options = [
        { name: '退款', code: 0 },
        { name: '还款', code: 1 },
    ]
}
get_payState_options()


let loading = ref(false)
let searchForm = ref({})
// 搜索
const handleSearch = (params) => {
    currentPage.value = 1;
    getTableData();
}
// 重置
const handleReset = (params) => {
    searchForm.value = {}
    handleSearch()
}
// 查询表格数据
let tableData = ref([{}])
let currentPage = ref(1)
let pageSize = ref(10)
let total = ref(0)
const handleSizeChange = (val) => {
    pageSize.value = val
    getTableData()
}
const handleCurrentChange = (val) => {
    currentPage.value = val
    getTableData()
}

const getTableData = (user) => {
    searchForm.value.mountCode = router.currentRoute.value.query.mountCode
    let query = {
        ...searchForm.value,
        pageIndex: currentPage.value,
        pageSize: pageSize.value
    }
    if (query.operDate && query.operDate.length > 1) {
        query.operDateStart = query.operDate[0]
        query.operDateEnd = query.operDate[1]
    }
    console.log('查询前的query :>> ', query,);
    loading.value = true
    // return
    Api.Common.PcObjProcess.Do({ "functionName": "GetMountRecordList", "orgCode": "0004", "contentData": query }).then(res => {
        console.log('查询订单table res :>> ', res,);
        loading.value = false
        tableData.value = res.data.payList
        total.value = res.totalCount
    })
}
getTableData()

// 退款
const handleReturn = (scope) => {
    ElMessageBox.confirm('是否要退款？', '提示',
        {
            confirmButtonText: '是',
            cancelButtonText: '否',
            type: 'warning',
        }
    ).then(() => {
        const { row, } = scope;
        console.log('row :>> ', row);
        let data = {
            itemCode: row.itemCode,
        }
        // console.log('会员升级 data :>> ', data);
        Api.Common.PcObjProcess.Do({ "functionName": "MountRefund", "contentData": data })
            .then(res => {
                console.log('点击撤销支付 res:>> ', res);
                getTableData()
            })
    }).catch(() => { })
}

</script>
  
<style scoped lang="scss">
/* 在这里编写组件的CSS样式 */
// .app-container {}
.app-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding: 20px 100px 0px 100px;
    background: #F2F2F2;

    .table-info-row {
        width: 1220px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .table-info {
            font-family: Microsoft YaHei;
            font-weight: bold;
            font-size: 20px;
            color: #212121;
            line-height: 100px;
        }

        .back-btn {
            width: 120px;
            height: 60px;
            background: #CCCCCC;
            border-radius: 8px;
            font-size: 18px;
            color: #212121;
            border: 0px;
        }
    }

    .content-box {
        margin-top: 20px;
        display: flex;
    }
}

.search-form {
    width: 1220px;
    background: #FFFFFF;
    border-radius: 8px;
    padding: 20px 10px 0 40px;
    margin-bottom: 20px;

    // display: flex;
    .search-form-item {
        ::v-deep {
            .el-form-item__label {
                line-height: 40px;
            }

            .el-date-editor {
                width: 260px;

            }

            .el-input {
                width: 282px;
            }

            .el-input__wrapper {
                height: 40px;
                background: #FAFAFA;
                border-radius: 8px;
            }

            .el-select__wrapper {
                width: 282px;
                height: 40px;
                background: #FAFAFA;
                border-radius: 8px;
            }
        }
    }

    .range-item {
        .el-input {
            width: 166px;
        }
    }

    .action-btn-box {
        float: right;

        button {
            width: 120px;
            height: 40px;
            line-height: 40px;
            background: #FFE566;
            border-radius: 8px;
            border: 0;
            font-size: 16px;
            color: #212121;
        }

        .reset-btn {
            background: #E6E6E6;
            color: #666666;
        }
    }
}

.table-box {
    padding: 20px 40px;
    background: #FFFFFF;
    border-radius: 8px;
    width: 1220px;

    .total-box {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 20px;
        color: #212121;
    }

    .el-table--fit {
        height: 400px;
  }

    ::v-deep {
        .el-table__inner-wrapper::before {
            height: 0px;
        }

        .el-table th {
            font-size: 13px;
            font-weight: 700;
        }

        .el-table .el-table__header th,
        .el-table .el-table__header tr,
        .el-table .el-table__header td {
            height: 48px;
            background: #F9F9F9;
        }
    }

    .action-btn {
        width: 66px;
        height: 28px;
        border-radius: 4px;
        border: 1px solid #FF6A00;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 14px;
        color: #FF6A00;
    }
}

.pagination-box {
    margin-top: 20px;

    ::v-deep {
        .number {
            background: #E6E6E6 !important;
            border-radius: 8px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 18px;
            color: #666666;
        }

        .number:hover {
            color: #FF6A00;
        }

        .is-active {
            background-color: #FF6A00 !important;
            border-radius: 8px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 18px;
            color: #FFFFFF;
        }

    }
}

.color-FF6A00 {
    color: #FF6A00;
}
</style>
  